<template>
  <div id="main">
    <div class="middle">
      <div class="middle_min1">
        <!-- 左 -->
        <div class="middle_left">
          <div class="left_data">
            <div class="left_img">
              <p><img src="../../public/img/logo.png" /></p>
            </div>
            <div>
              <p class="middle_name">欢迎!</p>
            </div>
            <div>
              <p class="middle_name">智学商城-后台管理系统</p>
            </div>
          </div>
        </div>
        <!-- 右 -->
        <div class="middle_right">
          <div class="middle_login">
            <div class="middle_log">
              <p class="middle_oputer">登录</p>
            </div>
            <div class="middle-input">
              <p>
                <el-input type="text" placeholder="请输入账号" v-model.trim="username" @keyup.enter="toLogin">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </p>
            </div>
            <div class="middle-input">
              <p>
                <el-input type="password" placeholder="请输入密码" v-model.trim="password" @keyup.enter="toLogin">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </p>
            </div>
            <div class="middle-button">
              <p>
                <button @click="toLogin">登录</button>
              </p>
            </div>
            <div class="author">
              <p>作者:廖阳逍</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from "@element-plus/icons-vue"; //引入图标
import { ref } from "vue"; //引入ref进行响应式
import { ElMessage } from "element-plus"; //消息提示
import axios from "axios"; //引入axios进行请求数据
import Cookies from "js-cookie";
import Qs from "qs";
import { useUserStore } from "@/stores/admin";
import { post } from "@/utils/request";
import { useRoute, useRouter } from "vue-router";
import { throttle } from "@/utils/antishake";

const store = useUserStore();
const username = ref(); //用户登录帐号
const password = ref(); //用户登录密码
const route = useRoute();
const router = useRouter();

const toLogin = throttle(function () {
  // 非空验证
  // if (username.value == null) {
  //   ElMessage.error("用户名不能为空！");
  // }
  // if (password.value == null) {
  //   ElMessage.error("密码不能为空!");
  // }

  let data = {
    //用Qs.stringify ()将对象序列化成URL的形式
    _gp: "admin",
    _mt: "login",
    username: username.value,
    password: password.value,
  };
  if (username.value != null && password.value != null) {
    post(data)
      .then((res) => {
        store.userpassword = { username: username.value, password: password.value }
        let { data: token, errmsg, errno } = res; //这里结构需要赋值的数据
        if (200 === errno) {
          ElMessage.success("恭喜你,登录成功！");
          let now = new Date(); //使用变量存储时间
          now.setTime(now.getTime() + 30 * 60 * 100); //使用setTime来设置30分钟的时间，然后使用getTime来获取
          Cookies.set("token", token, { expires: now }); //使用expires来获取有效时间
          return Promise.resolve(token);
        } else {
          ElMessage.error(errmsg)
          return Promise.reject(errmsg); //登录错误提示
        }
      })
      .then((res) => {
        const data = {
          //用Qs.stringify ()将对象序列化成URL的形式
          _gp: "admin",
          _mt: "info",
        };
        post(data).then((res) => {
          const { data, errno, errmsg } = res;
          if (200 == errno) {
            store.setUser(data);
            let back = route.query.back as string;
            if (back) {
              router.replace(back);
              return;
            }
            router.replace("/");
          } else {
            return Promise.reject(errmsg);
          }
        });
      })
      .catch((err) => {
        throw new Error(err);
      });
  } else {
    ElMessage({ message: "请输入用户和密码", type: "warning" }); //用户和密码为空的提示！
  }
}, 500)


</script>

<style lang="less" scoped>
#main {
  display: flex;
  flex-direction: column;
  background-attachment: fixed;
  background: url("../../public/img/login-back.png") no-repeat;
  background-size: 100% 100%;
  min-width: 100%;
  min-height: 100vh;
  justify-content: center;
  align-items: center;

  .middle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .middle .middle_min1 {
    width: 750px;
    height: 420px;
    margin: auto;
    display: flex;
  }

  .middle .middle_min1 .middle_left {
    width: 300px;
    height: 420px;
    background-color: #005de9;
    border-radius: 1px 1px 20px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .middle .middle_min1 .middle_left .left_data {
    width: 200px;
    height: 180px;
    margin: auto;
    text-align: center;
  }

  .middle .middle_min1 .middle_left .left_data .left_img p img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: 0px -10px 50px 10px white;
  }

  .middle .middle_min1 .middle_left .left_data div p {
    color: white;
    margin: 10px;
  }

  .middle .middle_min1 .middle_right {
    width: 450px;
    height: 420px;
    background-color: white;
    border-radius: 0px 5px 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .middle .middle_min1 .middle_right .middle_login {
    width: 300px;
    height: 200px;
    margin: auto;
    text-align: center;
  }

  .middle .middle_min1 .middle_right .middle_login .middle_log {
    font-size: 18px;
  }

  .middle .middle_min1 .middle_right .middle_login .middle-input p .el-input {
    width: 300px;
    height: 35px;
    border-radius: 4px;
    text-indent: 1rem;
    margin-top: 25px;
  }

  .middle .middle_min1 .middle_right .middle_login .middle-button p button {
    width: 130px;
    height: 32px;
    background-color: #005de9;
    border: none;
    border-radius: 5px;
    color: white;
    margin-top: 30px;
    cursor: pointer;
  }

  .middle .middle_min1 .middle_right .middle_login .author {
    font-size: 14px;
    color: #050505;
    margin-top: 20px;
  }

  .middle_name {
    font-weight: bold;
  }
}
</style>
